import React, { useState, useEffect, useRef } from 'react';

import Pro_Form_Table from './components/Pro_Form_Table';

import { Table, Tag, Space } from 'antd';
export default function (props) {
  const [inputConfig, setInputConfig] = useState([
    {
      type: 'input',
      label: '项目编号',
      name: 'itemNum',
      value: 'value-项目编号',
      placeholder: '请输入',
      rules: { required: true, message: '请输入项目编号' },
      style: {
        marginRight: '15px',
      },
    },
    {
      type: 'input',
      label: '项目名称',
      name: 'itemName',
      value: 'value-项目名称',
      placeholder: '请输入',
      rules: { required: true, message: '请输入项目名称' },
      style: {
        marginRight: '15px',
      },
    },
    {
      type: 'select',
      label: '状态',
      name: 'itemState',
      value: '2',
      placeholder: '请选择',
      rules: { required: true, message: '请选择状态' },
      valueArr: [
        {
          name: '状态-1',
          id: 1,
        },
        {
          name: '状态-2',
          id: 2,
        },
        {
          name: '状态-3',
          id: 3,
        },
      ],
      style: {
        marginRight: '15px',
        // width: '120px'  // 这个样式有点啥毛病
      },
    },
    {
      type: 'select',
      label: '项目负责人',
      name: 'itemPerson',
      value: '负责人-1',
      placeholder: '请选择',
      rules: { required: false, message: '请选择项目负责人' },
      valueArr: [
        {
          name: '负责人-1',
          id: 1,
        },
        {
          name: '负责人-2',
          id: 2,
        },
        {
          name: '负责人-3',
          id: 3,
        },
      ],
      style: {
        marginRight: '15px',
      },
    },
    {
      type: 'select',
      label: '项目内容',
      name: 'itemContent',
      value: '内容-1',
      placeholder: '请选择',
      rules: { required: false, message: '请选择项目内容' },
      valueArr: [
        {
          name: '内容-1',
          id: 1,
        },
        {
          name: '内容-2',
          id: 2,
        },
        {
          name: '内容-3',
          id: 3,
        },
      ],
      style: {
        marginRight: '15px',
      },
    },
    {
      type: 'select',
      label: '服务类型',
      name: 'itemServeType',
      value: '服务类型-1',
      placeholder: '请选择',
      rules: { required: false, message: '请选择服务类型' },
      valueArr: [
        {
          name: '服务类型-1',
          id: 1,
        },
        {
          name: '服务类型-2',
          id: 2,
        },
        {
          name: '服务类型-3',
          id: 3,
        },
      ],
      style: {
        marginRight: '15px',
      },
    },
  ]);

  const [btnConfig, setBtn] = useState([
    {
      name: '查询',
      type: 'primary',
      btn: async () => {
        // let a = await formRef.current.validateFields()  // 表单验证时的方式
        // console.log("查询呀呀", a)

        let getData = formRef.current.getFieldValue(); //  获取表单中的数据
        console.log('查询, 外部拿到的值', getData);
      },
      style: {
        margin: '0px 10px',
      },
    },
    {
      name: '重置',
      btn: () => {
        formRef.current.resetFields();
      },
      style: {
        margin: '0px 10px',
      },
    },
    {
      name: '触发表单校验',
      type: 'dashed',
      btn: async () => {
        let a = await formRef.current.validateFields(); // 表单验证时的方式
        console.log('触发表单校验', a);

        // let getData = formRef.current.getFieldValue() //  获取表单中的数据
        // console.log("查询, 外部拿到的值", getData)
      },
      // disabled: true,
      style: {
        margin: '0px 10px',
      },
    },
  ]);
  const btnStyle = {
    // float: 'right',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
  };
  const [formArr, setFormArr] = useState({
    // labelCol: 8,
    // wrapperCol: 8,
    initialValues: {
      //  表单中的 默认值
      itemNum: '表单中的默认值',
      // itemName: "2234- 默认值",
    },
    style: {
      display: 'flex',
      flexWrap: 'wrap',
    },
  });
  const formRef = useRef();

  const btn = async () => {
    //  外部 使用 form 的方法
    let b = await formRef.current.validateFields();
    console.log('拿到结果::', b);
  };

  const createBtnConfig = [
    {
      name: '创建弹窗',
      type: 'primary',
      icon: 'PlusOutlined',
      btn: () => {
        console.log('创建弹窗');
      },
      style: {
        margin: '10px 10px',
      },
    },
    {
      name: '新建抽屉',
      type: 'primary',
      icon: 'PlusOutlined',
      btn: () => {
        console.log('新建抽屉');
      },
      style: {
        margin: '10px 10px',
      },
    },
    {
      name: '新建页面',
      type: 'primary',
      icon: 'PlusOutlined',
      btn: () => {
        console.log('新建页面');
      },
      style: {
        margin: '10px 10px',
      },
    },
    {
      name: '批量删除',
      btn: () => {
        console.log('新建页面');
      },
      style: {
        margin: '10px 10px',
      },
    },
    {
      name: '...',
      btn: () => {
        console.log('...');
      },
      style: {
        margin: '10px 10px',
      },
    },
  ];
  const tableConfig = {
    pagination: false, //  显示和隐藏 分页器
    selectedRowKeys: {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log('onChange', selectedRowKeys, selectedRows);
      },
      type: 'checkbox',
    },
    style: {
      marginTop: '20px',
      textAlign: 'right',
    },
  };
  const Pagination = {
    total: 185,
    current: 1,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => {
      return `共 ${Pagination.total} 条记录`;
    },
    onChange: (page, pageSize) => {
      console.log('page:', page, 'pageSize:', pageSize);
    },
    pageSizeOptions: [10, 20, 25],
    style: {
      marginTop: '20px',
      textAlign: 'right',
    },
  };

  return (
    <div style={{ padding: '30px' }}>
      {/* <button onClick={btn} > 按钮 </button> */}

      <Pro_Form_Table
        ref={formRef}
        inputConfig={inputConfig} //  input 输入框的 配置
        btnConfig={btnConfig} //  按钮的 配置
        btnStyle={btnStyle} // btn 最外层的 样式
        formArr={formArr} //  form 表单的配置
        createBtnConfig={createBtnConfig} //  按钮的 配置
        columns={columns} // 表格的 配置项
        data={data} //  表格的 数据源
        tableConfig={tableConfig} //  table 表格的 配置项
        Pagination={Pagination} //  分页的  配置项
      />
    </div>
  );
}

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => {
      return a.age - b.age;
    },
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (tags) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a
          onClick={() => {
            console.log('删除');
          }}
        >
          修改
        </a>
        <a>删除</a>
      </Space>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 30,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
